<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const map = {};
      const val = [];
      let datas = [
        { id: "1", parent_id: "0", other: "113" },
        { id: "0", parent_id: "88", other: "456" },
        { id: "2", parent_id: "1", other: "456" },
      ];
      datas.forEach((item) => {
        map[item.id] = item;
      });
      console.log('map', map)
      datas.forEach((item) => {
        // 定義parent
        const parent = map[item.parent_id];
        console.log('map[item]', map[item.parent_id])

        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          val.push(item);
        }
      });
      console.log(val, "val");
      console.log('datas', datas)
      console.log('map--', map)
    </script>
    +----------------+         +-----------------------------------+
    |    栈 (Stack)  |         |              堆 (Heap)              |
    +----------------+         +-----------------------------------+
    | datas: 0x6000  | ------> | 0x6000: [0x2000, 0x3000, 0x4000]    |
    | map: 0x1000    | ------> | 0x1000: { "1": 0x2000, "0": 0x3000, "2": 0x4000 } |
    | val: 0x5000    | ------> | 0x5000: [0x3000]                   |
    +----------------+         +-----------------------------------+
                                | 0x2000: { id: "1", parent_id: "0", other: "113", children: [0x4000] } |
                                | 0x3000: { id: "0", parent_id: "88", other: "456", children: [0x2000] } |
                                | 0x4000: { id: "2", parent_id: "1", other: "456" }                     |
                                +-----------------------------------+

  </body>
</html>
